<template>
  <div class="com-page">
    <div ref="container" class="com-container" />
    <!-- <div class="theme">{{ theme }}</div> -->
  </div>
</template>

<script>
import { setEcharts, setEchartOptions } from '@/api/echarts/stock.js'
import _ from 'lodash'
export default {
  data() {
    return {
      seriesData: [],
      current: 0,
      currentData: []
    }
  },
  async mounted() {
    await this.initCharts()
    this.setEcharts()
    setInterval(() => {
      switch (this.current) {
        case 0:
          this.current = 1
          this.currentData = this.seriesData[this.current]
          this.setEcharts()
          break
        case 1:
          this.current = 0
          this.currentData = this.seriesData[this.current]
          this.setEcharts()
          break
      }
    }, 5000)
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 获取echarts的数据
    async initCharts() {
      const { data } = await this.$http.get('/stock')
      console.log(data)
      this.seriesData = _.chunk(data, 5)
      this.currentData = this.seriesData[0]
    },
    // 渲染echarts图表
    setEcharts() {
      setEcharts(this.$refs.container, this.currentData)
    },
    turnRight() {
      if (this.current === this.seriesData.length - 1) {
        alert('无数据')
      } else {
        this.current++
        this.currentData = this.seriesData[this.current]
        this.setEcharts()
      }
    },
    turnLeft() {
      if (this.current === 0) {
        alert('无数据')
      } else {
        this.current--
        this.currentData = this.seriesData[this.current]
        this.theme = this.currentData.name
        this.setEcharts()
      }
    },
    // 屏幕分辨率 改变时 option 变化
    screenAdapter() {
      const titleFontSize = (this.$refs.container.offsetWidth / 100) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: {
          barWidth: titleFontSize,
          itemStyle: {
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
          }
        }
      }
      setEchartOptions(this.$refs.container, adapterOption)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .com-page {
  position: relative;
}
span:hover {
  cursor: pointer;
}
.iconRight {
  position: absolute;
  color: white;
  font-size: 100px;
  z-index: 2;
  top: 40%;
  right: 5%;
}
.iconLeft {
  position: absolute;
  color: white;
  font-size: 100px;
  z-index: 2;
  top: 40%;
  left: 5%;
}
.theme {
  position: fixed;
  color: white;
  top: 80%;
  right: 20%;
  font-size: 35px;
  font-weight: bolder;
}
</style>
